<template>
  <div class="clockContent" style="color: #fff;">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="clockMain">
      <div class="clockItem" v-for="item in nowTime">
        <span>{{ item }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const nowTime = ref("")
// 格式：XXXX年XX月XX日XX时XX分XX秒 星期X
const complement = function (value: any) {
  return value < 10 ? `0${value}` : value;
};
  const formateDate = (date: any) => {
  const time = new Date(date)
  const year = time.getFullYear()
  const month = complement(time.getMonth() + 1)
  const day = complement(time.getDate())
  const hour = complement(time.getHours())
  const minute = complement(time.getMinutes())
  const second = complement(time.getSeconds())
  // const week = '星期' + '日一二三四五六'.charAt(time.getDay())
  // return `${year}年${month}月${day}日${hour}：${minute}：${second}`
  return `${hour}${minute}${second}`
}

onMounted(() => {
    setInterval(() => {
        nowTime.value = formateDate(new Date())
    })
})

</script>

<style lang="scss" scoped>
.clockContent {
  width: 100%;
  .el-card {
    border-radius: $base-card-border-radius;
  }
  .clockMain {
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    .clockItem {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 25px 5px;
      opacity: 0.95;
      margin-right: 20px;
      background-color: black;
      box-shadow: 0px 3px 20px 0px rgba(248,216,82, 0.6);
      color: #fff;
      span {
        font-size: 240px;
        font-weight: 900;
        // opacity: 0.9;
      }
      &:nth-child(2) {
        margin-right: 50px;
      }
      &:nth-child(4) {
        margin-right: 50px;
      }
    }
  }

}
</style>